<template>
  <view class="content1">
    <view
      class="box"
      :class="'box' + type"
      v-for="(item, index) in detail.data"
      :key="index"
    >
      <view class="box_top">
        <view class="left">
          <view class="price">
            <text class="price1">{{ parseInt(item.price) }}</text>
            <text class="price2">元</text>
          </view>
          <view class="left_text">优惠券</view>
        </view>
        <view class="right">
          <view class="right_text">
            <view class="right_title">{{ item.name }}</view>
            <view class="right_time">
              {{
                item.threshold == 0 ? "无门槛" : "满" + item.threshold + "可用"
              }}
            </view>
            <view class="right_time">
              有效期至{{ item.due_time }}
              <!-- <span style="margin-left: 20rpx" @click="showModel(item.id)"
                >规则</span
              > -->
            </view>
            <!-- <view class="right_page" @click="goInstructions">
              使用说明
              <u-icon name="arrow-right" color="#56699E"></u-icon>
            </view> -->
          </view>
          <view class="right_btn" v-if="showBtn">
            <view
              @click="selectFn(item)"
              class="btn"
              :style="{
                background: color,
              }"
              >{{ btnText }}</view
            >
          </view>
        </view>
      </view>
      <view class="box_bottom" v-if="item.message && item.message.length > 0">
        <view v-for="itemVal, ind in item.message" :key="ind">{{itemVal}}</view>
      </view>
    </view>

    <view class="empty_view" v-if="detail.data && detail.data.length == 0">
      <image
        class="item_left_clickable"
        src="../../../static/images/my/kong.png"
        mode=""
      ></image>
      <view>当前没有相关数据，请查看其他分类或功能~</view>
    </view>

    <u-modal
      :show="show"
      :title="title"
      :content="content"
      confirmColor="#55B877"
      :closeOnClickOverlay="true"
      @confirm="confirm"
      @close="confirm"
    ></u-modal>
  </view>
</template>
  
  <script>
import storage from "@/common/storage"; // 缓存封装
export default {
  components: {},
  props: {
    type: {
      type: Number,
      default: 1,
    },
    btnText: {
      type: String,
      default: "选择",
    },
    color: {
      type: String,
      default: "#3A5E9F",
    },
    detail: {
      type: Object,
      default: () => {},
    },
    showBtn: {
      type: Boolean,
      default: true,
    },
    isGoIndex: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      show: false,
      title: "使用规则",
      content: "",
    };
  },
  created() {},
  methods: {
    confirm() {
      this.show = false;
    },
    showModel(id) {
      this.getRule(id);
    },
    // 优惠券详情
    getRule(id) {
      this.$http
        .userCoupon_info({ id: id })
        .then((res) => {
          this.show = true;
          let content = res.data.info.message;
          let str = "";
          for (let i = 0; i < content.length; i++) {
            str += content[i] + " ";
          }
          this.content = str;
          console.log(res.data.info.message, "优惠券详情");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    goInstructions() {
      uni.navigateTo({
        url: "/pages/integral/Instructions",
      });
    },
    selectFn(item) {
      if (this.btnText == "去使用" || "选择") {
        // 个人中心优惠券跳主页
        if (this.isGoIndex) {
          uni.switchTab({
            url: "/pages/home/index",
          });
          return;
        }
        // 订单去使用
        let coupon = {
          couponText: item.name,
          couponId: item.id,
        };
        storage.setJson("coupon", coupon);
        uni.navigateBack({
          delta: 1,
        });
      }
    },
  },
};
</script>
  
<style scoped lang="scss">
.box {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  margin-bottom: 32rpx;
  border-radius: 24rpx;
  .box_top {
    display: flex;
    // flex-direction: column;
    align-items: center;
    padding: 30rpx;
    
  }
  .box_bottom{
    border-top: 1rpx solid rgba(255,255,255,0.3);
    padding: 30rpx;
    font-size: 26rpx;
    color: #56699E;
  }

  .left {
    padding: 0 37rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-right: 2rpx dashed #56699e;
    .price {
      color: #1e3152;
      .price1 {
        font-size: 56rpx;
      }
      .price2 {
        font-size: 30rpx;
      }
    }
    .left_text {
      font-size: 28rpx;
      margin-top: 12rpx;
    }
  }
  .right {
    flex: 1;
    display: flex;
    justify-content: space-between;
    .right_text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-left: 28rpx;
      box-sizing: border-box;
      .right_title {
        font-size: 32rpx;
        color: #1e3152;
      }
      .right_time {
        font-size: 26rpx;
        color: #56699e;
        margin-top: 8rpx;
        // display: flex;
        // align-items: center;
      }
      .right_page {
        font-size: 26rpx;
        color: #56699e;
        margin-top: 8rpx;
        display: flex;
        align-items: center;
      }
    }
    .right_btn {
      display: flex;
      align-items: center;
      .btn {
        width: 142rpx;
        height: 56rpx;
        background: #3a5e9f;
        border-radius: 30rpx;
        font-size: 26rpx;
        color: #eeeeee;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
.box1 {
  background-image: url("../../../static/images/pic_yhq_weishiyong.png");
}
.box2 {
  background-image: url("../../../static/images/coCreateItem.png");
}
.box3 {
  background-image: url("../../../static/images/pic_dhy_.png");
}
.box4 {
  background-image: url("../../../static/images/pic_yhq_hui.png");
}

.empty_view {
  margin-top: 300rpx;
  image {
    margin: 0 auto;
    width: 410rpx;
    height: 410rpx;
  }
  view {
    font-size: 30rpx;
    color: #d8d8d8;
    text-align: center;
  }
}
</style>